<!-- z-paging聊天item -->
<!-- isMe改成 user assistant system tool-->

<template>
	<view class="chat-item">
		<text class="chat-time" v-if="item.time&&item.time.length">
			{{item.time}}
		</text>
		<view :class="{'chat-container':true,'chat-location-me':item.role==='user'}">
			<view class="chat-icon-container">
				<image class="chat-icon" :src="item.icon" mode="aspectFill" />
			</view>
			<view class="chat-content-container">
				<text :class="{'chat-user-name':true,'chat-location-me':item.role==='user'}">
					{{item.name}}
				</text>
				<view class="chat-text-container-super" :style="[{justifyContent:item.role==='user'?'flex-end':'flex-start'}]">
					<view :class="{'chat-text-container':true,'w-user':item.role==='user','w-ai':item.role!=='user'}">
						<view :class="{'chat-text':true,}">
							<mp-html  selectable scroll-table :markdown="true" :content="item.content==''&&(item.status==0||item.status==1)?'正在思考中···':item.content"></mp-html>
						</view>

						<view class="more-menu-accessory" v-if="item.role!=='user'&&item.status!==0&&item.status!==1">
							<view style="display: flex;margin-left: 0rpx;">
								<view @click="changeAnswer" class="anew pointer">
									<view class="a_text">重新生成</view>
								</view>
							</view>
							<view class=""></view>
							<view class="flex-lect anew pointer" style="margin-right: 30rpx;">
								<view @click="copy" class="a_text">复制</view>
							</view>
						</view>


					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "chat-item",
		props: {
			item: {
				type: Object,
				default: function() {
					return {
						time: '',
						icon: '',
						name: '',
						content: '',
						role: ''
					}
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			msgContent(content) {
				if (!content) { return }
				// 判断markdown中代码块标识符的数量是否为偶数
				if (content.split("```").length % 2) {
					if (content[content.length - 1] != '\n') {
						content += '\n'
					}
				}
				return content
			},
			//重新发送
			changeAnswer() {
				this.$emit('changeAnswer', this.item)
			},
			// 复制文本内容到系统剪切板
			copy() {
				uni.setClipboardData({
					data: this.item.content,
					showToast: false,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.w-user {
		max-width: 560rpx;
	}
	.w-ai {
		width: 560rpx;
	}
	.anew {
		display: flex;
		align-items: center;
		.a_icon {
			width: 28rpx;
			height: 28rpx;
		}
		.a_text {
			font-size: 28rpx;
			// margin-left: 18rpx;
			letter-spacing: 0rpx;
			line-height: 39.2rpx;
			color: rgba(119, 123, 161, 1);
		}
	}
	.pointer {
		cursor: pointer;
	}
	.pointer:hover {
		color: #BBB;
	}
	.more-menu-accessory {
		height: 89rpx;
		line-height: 89rpx;
		display: flex;
		justify-content: space-between;
		.pointer+.pointer {
			margin-left: 10px;
		}
	}
	.chat-item {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}
	.chat-time {
		padding: 4rpx 0rpx;
		text-align: center;
		font-size: 22rpx;
		color: #aaaaaa;
	}
	.chat-container {
		display: flex;
		flex-direction: row;
	}
	.chat-location-me {
		flex-direction: row-reverse;
		text-align: right;
	}
	.chat-icon-container {
		margin-top: 12rpx;
	}
	.chat-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #eeeeee;
	}
	.chat-content-container {
		margin: 0rpx 15rpx;
	}
	.chat-user-name {
		font-size: 26rpx;
		color: #888888;
	}
	.chat-text-container {
		text-align: left;
		/* background-color: #f1f1f1; */
		background-color: #ffffff;
		border-radius: 8rpx;
		padding: 0rpx 20rpx;
		margin-top: 10rpx;
		/* #ifndef APP-NVUE */
		/* max-width: 580rpx; */
		/* #endif */
	}
	.chat-text-container-me {
		background-color: #007AFF;
	}
	.chat-text-container-super {
		display: flex;
		flex-direction: row;
	}
	.chat-text {
		font-size: 26rpx;
		/* #ifndef APP-NVUE */
		word-break: break-all;
		/* #endif */
		/* #ifdef APP-NVUE */
		max-width: 500rpx;
		/* #endif */
	}
	.chat-text-me {
		color: white;
	}
</style>